<template>
  <div>
    <div class="container">
      <el-form ref="query" :model="query" :inline="true" size="mini">
        <el-form-item label="状态：" prop="status">
          <el-select v-model="query.status" placeholder="请填写状态" clearable>
            <el-option
                v-for="item in $enum.getMapItems('status')"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核状态：" prop="auditStatus">
          <el-select
              v-model="query.auditStatus"
              placeholder="请填写审核状态"
              clearable
          >
            <el-option
                v-for="item in $enum.getMapItems('auditStatus')"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="名称：" prop="name">
          <el-input
              v-model="query.name"
              placeholder="请填写名称"
              clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="法人：" prop="legalPerson">
          <el-input
              v-model="query.legalPerson"
              placeholder="请填写法人"
              clearable
          ></el-input>
        </el-form-item>

        <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
        >搜索
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-delete"
            @click="handleClear"
        >清空
        </el-button>
      </el-form>
      <div class="handle-box">
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            class="handle-del mr10"
            @click="handleEdit()"
            v-if="$perm.hasPerm('button_org_add')"
        >添加
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-delete"
            class="handle-del mr10"
            @click="delAllSelection()"
            v-if="$perm.hasPerm('button_org_batchDelete')"
        >批量删除
        </el-button>
      </div>

      <el-table
          :data="records"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
            align="center"
        ></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="abbr" label="简称"></el-table-column>
        <el-table-column prop="legalPerson" label="法人"></el-table-column>
        <el-table-column prop="province" label="省份"></el-table-column>
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column prop="district" label="地区"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag
                :type="
                scope.row.status === 'ENABLE'
                  ? 'success'
                  : scope.row.status === 'DISABLE'
                  ? 'danger'
                  : 'info'
              "
            >{{ $enum.getMapValue("status", scope.row.status).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template #default="scope">
            <el-tag
                :type="
                scope.row.auditStatus === 'AUDITED'
                  ? 'success'
                  : scope.row.auditStatus === 'UN_AUDITED'
                  ? 'danger'
                  : 'info'
              "
            >{{
                $enum.getMapValue("auditStatus", scope.row.auditStatus).name
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
        <el-table-column prop="modifiedTime" label="更新时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row.id)"
                v-if="
                $perm.hasPerm('button_org_edit') &&
                (scope.row.auditStatus == 'NEW_BUILT' ||
                  scope.row.auditStatus == 'REJECTED')
              "
            >编辑
            </el-button>
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEditStatus(scope.row.id, scope.row.status)"
                v-if="$perm.hasPerm('button_org_editStatus')"
            >
              {{ scope.row.status == "ENABLE" ? "禁用" : "启用" }}
            </el-button>
            <el-button
                type="text"
                icon="el-icon-check"
                @click="handleSubmit(scope.row.id)"
                v-if="
                $perm.hasPerm('button_org_submitAudit') &&
                (scope.row.auditStatus == 'NEW_BUILT' ||
                  scope.row.auditStatus == 'REJECTED')
              "
            >提交审核
            </el-button>
            <el-button
                type="text"
                icon="el-icon-check"
                @click="handleAudit(scope.row.id)"
                v-if="
                $perm.hasPerm('button_org_audit') &&
                scope.row.auditStatus == 'UN_AUDITED'
              "
            >审核
            </el-button>
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleOrgDepartment(scope.row.id)"
            >部门
            </el-button
            >
            <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="
                $perm.hasPerm('button_org_batchDelete') &&
                scope.row.auditStatus != 'AUDITED'
              "
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <custom-page
            :current="query.current"
            :size="query.size"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog
        :title="'审核'"
        v-model="editVisible"
        width="50%"
        @closed="closed"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-input v-if="visible" v-model="form.orgId"/>
        <el-form-item label="审核意见" prop="remark">
          <el-input
              size="small"
              v-model="form.remark"
              placeholder="请填写备注"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              show-word-limit
              maxlength="99"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="rejected()">驳回</el-button>
          <el-button type="primary" @click="auditOk()">同意</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  orgPageApi,
  orgRemoveApi,
  orgEditStatusApi,
  orgEditAuditStatusApi,
} from "../../../api/mgt/power/org";
import {deepCopy} from "@/utils";

const obj = {
  //信息
  auditStatus: "UN_AUDITED",
  remark: "",
  orgId: "",
};

export default {
  data() {
    return {
      query: {
        current: 1,
        size: 10,
        status: null,
        auditStatus: null,
        name: null,
        legalPerson: null,
      },
      records: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      form: deepCopy(obj),
      total: 0,
      rules: {
        remark: [
          {required: true, message: "请填写审核意见", trigger: "change"},
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      orgPageApi(this.query).then((res) => {
        this.records = res?.bizData?.records;
        this.total = res?.bizData?.total;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.query.current = 1;
      this.getData();
    },
    // 清空
    handleClear() {
      if (this.$refs.query != undefined) {
        this.$refs.query.resetFields();
        this.getData();
      }
    },
    // 启/禁用
    handleEditStatus(id, status) {
      let tip;
      let statusVal;
      if (status == "ENABLE") {
        tip = "确定要禁用吗？";
        statusVal = "DISABLE";
      } else if (status == "DISABLE") {
        tip = "确定要启用吗？";
        statusVal = "ENABLE";
      }
      this.$confirm(tip, "提示", {
        type: "warning",
      }).then(() => {
        orgEditStatusApi({id: id, status: statusVal}).then((res) => {
          this.getData();
        });
      });
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        orgRemoveApi({ids: row.id}).then((res) => {
          this.getData();
        });
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      if (length < 1) {
        this.$message.error("请选择数据");
        return;
      }
      this.multipleSelection.filter((item) => {
        this.delList.push(item.id);
      });
      const ids = this.delList.join(",");
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        orgRemoveApi({ids: ids}).then((res) => {
          this.getData();
        });
      });
    },
    // 编辑操作
    handleEdit(id) {
      this.$router.goPage({
        path: "/org/operate",
        query: {
          id,
        },
      });
    },
    // 部门
    handleOrgDepartment(id) {
      this.$router.goPage({
        path: "/org/department",
        query: {
          orgId: id,
        },
      });
    },
    // 提交审核
    handleSubmit(id) {
      this.form.orgId = id;
      this.form.auditStatus = "UN_AUDITED";
      this.form.remark = "待审核";
      this.$confirm("确定要提交审核吗？", "提示", {
        type: "warning",
      }).then(() => {
        orgEditAuditStatusApi(this.form).then((res) => {
          this.getData();
        });
      });
    },
    // 审核弹框
    handleAudit(id) {
      if (this.$refs.form != undefined) {
        this.$refs["form"].resetFields();
      }
      this.form.orgId = id;
      this.form.remark = "同意";
      this.editVisible = true;
    },
    // 审核
    auditOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.auditStatus = "AUDITED";
          orgEditAuditStatusApi(this.form).then((res) => {
            this.editVisible = false;
            this.getData();
          });
        } else {
          return false;
        }
      });
    },
    // 驳回
    rejected() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.auditStatus = "REJECTED";
          orgEditAuditStatusApi(this.form).then((res) => {
            this.editVisible = false;
            this.getData();
          });
        } else {
          return false;
        }
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.query.current = val;
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-top: 20px;
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
